// 权限处理的页面 只是梳理了一下代码这个模块, 我们自己写
import router from '@/router'
import store from '@/store'
// Nprogress 进度条插件
import Nprogress from 'nprogress'
// 导入样式
import 'nprogress/nprogress.css'
import { asyncRoutes } from '@/router'
// 白名单列表
const whiteList = ['/login', '/404']
// 前置导航首页做权限页面拦截
router.beforeEach(async(to, from, next) => {
  // 页面跳转就会开启进度条
  Nprogress.start()
  const token = store.getters.token
  if (token) { // 有token的情况, 说明已经登录过了
    // 如果有token,还要访问登录页, 直接丢到首页
    if (to.path === '/login') {
      // next('/')  跳到首页, 被next拦截走的, 不会自动关闭, 因为没有进入到 afterEach, 需要手动关闭
      next('/')
      Nprogress.done()
    } else { // 有token的情况下,访问不是登录页面. 直接放行
      // console.log('获取个人资料')
      // 权限系统,应该是先获取到个人资料后,在放心用户进入页面,
      // 应该在这个位置 提交获取个人资料的action才对
      // 1.优化原因: 只要跳转 导航守卫就会拦截, 就会重复存储个人信息
      // 2.方案: 如果没有存储过, 做一次存储,如果存储过了, 没有必要再触发这个action了
      if (!store.state.user.userInfo.userId) {
        const { roles: { menus }} = await store.dispatch('user/getInfo')
        // -------------了解 真正渲染用户主题颜色设置涉及到接口的, 模拟
        /*  const themeColor = '#666' // 假设这个颜色就是用户喜欢的主题(服务器返回的主题色)
        // 用户登录后, 将用户喜欢的主题色设置一下
        store.dispatch('settings/changeSetting', { key: 'theme', value: themeColor }) */
        // console.log(menus) // menus 是这个人的权限列表,后期会在这个位置处理权限问题
        // 将动态路由存储在vuex中
        const res = await store.dispatch('permission/filterRoutes', menus)
        // 这个是路由规则数组
        router.addRoutes(res, { path: '*', redirect: '/404', hidden: true })
        // -----------------
        // addRoutes 是添加路由规则的方法 这样添加的规则不是响应式的
        // router.addRoutes(asyncRoutes) // 测试将之前 静态路由和动态路由组合  addRoutes是给路由添加规则的方法
        // addRoutes有一个已知错误
        // next(to.path)
        /*   router.push('/路径')
        router.push({path :'/xx'})
        router.push({name :'路由名字'}) */
        next({ path: to.path, replace: true }) // replace不会存储刷新的路由记录
        // 刷新页面的时候 项目中默认有4条静态路由规则, 刷新之后才将动态路由规则给加到routes中.
        // 出门了 开门一看 发现没路,  手动铺一条路,重新走
      }
      next()
    }
  } else { // 没有token
    if (whiteList.includes(to.path)) { // 用户未登录,先判断是否访问的页面是否在白名单中, 如果访问的是白名单,直接放行
      next()
    } else { // 未登录访问的是有权限的页面,直接去登录
      next('/login')
      Nprogress.done() //  跳到首页, 被next拦截走的, 不会自动关闭, 因为没有进入到 afterEach, 需要手动关闭
    }
  }
})

// 后置导航守卫进度条关闭
router.afterEach((to, from) => {
  // console.log('后置进来了')
  // 关闭进度条即可
  Nprogress.done()
})
